/* components/MyTabbar/MyTabbar.wxss */

.main {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  height: 120rpx;
  // background-color: #fad0c4;
  // background-image: linear-gradient(to top, #ff0666 0%, #ffb199 100%);
  // background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
  background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
  // background-image: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%);
  border-radius: 10rpx 10rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom, 50rpx);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .main_item {
    width: 120rpx;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    .main_img {
      width: 60rpx;
      height: 60rpx;
      transition: all .3s;
    }
    .main_text {
      position: absolute;
      color: #fff;
      opacity: 0;
      transition: all .3s;
      transform: translateY(20rpx);
      font-weight: 500;
      margin-top: 10rpx;
    }
  }
  .active .main_img {
    transform: translateY(-60rpx);
  }
  .active .main_text {
    opacity: 1;
  }
  // 选中框背景
  .main_item_active {
    width: 120rpx;
    height: 120rpx;
    background-color: #fadbdb;
    position: absolute;
    border-radius: 50%;
    border: 10rpx solid var(--bg);
    // 250rpx = 总宽度750，分成三份，每个宽度250，的一半减去背景一半
    left: calc(250rpx / 2 - 60rpx);
    top: -60rpx;
    z-index: 0;
    box-sizing: border-box;
    transition: all .3s;
  }
  .main_item_active::after,
  .main_item_active::before {
    content: '';
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    background-color: transparent;
    top: 49%;
  }
  .main_item_active::before {
    left: -34rpx;
    border-radius: 0 30rpx 0 0;
    box-shadow: 5rpx -15rpx 0 0 var(--bg);
  }
  .main_item_active::after {
    right: -34rpx;
    border-radius: 30rpx 0 0 0;
    box-shadow: -5rpx -15rpx 0 0 var(--bg);
  }
}